<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSsMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <style>
        .error{
            line-height: 30px;
            color:#ff0000;
        }
    </style>
</head>
<body>

<div style="margin:50px auto;width: 1200px;">
    <h1>用户注册</h1>
    <br>
    <form class="form-horizontal" method="post" action="{:url('index/login/regOk')}">
        {:token()}
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">昵称</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="username" id="name" placeholder="请输入昵称">
            </div>
            <span class="error"></span>
        </div>
        <div class="form-group">
            <label for="phone" class="col-sm-2 control-label">手机号</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入手机号">
            </div>
            <span class="error"></span>
        </div>
        <div class="form-group">
            <label for="code" class="col-sm-2 control-label">验证码</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="code" id="code" maxlength="4" placeholder="请输入验证码">
                <button type="button" id = "btnsend" style="margin-top:15px;">发送验证码</button>
            </div>
            <span class="error"></span>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="password" id="password" placeholder="请输入密码">
            </div>
            <span class="error"></span>
        </div>
        <div class="form-group">
            <label for="repassword" class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-3">
                <input type="text" name="repassword" class="form-control" id="repassword" placeholder="请确认密码">
            </div>
            <span class="error"></span>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default">确认注册</button>
            </div>
        </div>
    </form>
</div>

<script>

    // 发送短信验证
    $("#btnsend").click(function(){

        // 手机号检测
        if($("#phone").val() == ""){

            $("#phone").closest(".form-group").find(".error").html("手机号不允许为空");
            flag = false;
        }else if(!/^1[3-9]\d{9}$/.test($("#phone").val())){

            $("#phone").closest(".form-group").find(".error").html("手机号格式不正确");
            flag = false;
        }else{
            $("#phone").closest(".form-group").find(".error").html("");
        }

        var data = {"phone":$("#phone").val()};

        $.ajax({
            url:"{:url('index/login/sendcode')}",
            data:data,
            dataType:'json',
            success:function(res){
                if(res.code != 10000){
                    alert("发送短信失败，请重新使用");
                    return;
                }

            }
        })


    })

    // 表单提交验证
    $(".btn").click(function(){
        flag = true;

        // 用户名检测
        if($("#name").val() == ""){
            $("#name").closest(".form-group").find(".error").html("用户名不能为空");
            flag = false;
        }else{
            $("#name").closest(".form-group").find(".error").html("");
        }

        // 手机号检测
        if($("#phone").val() == ""){

            $("#phone").closest(".form-group").find(".error").html("手机号不允许为空");
            flag = false;
        }else if(!/^1[3-9]\d{9}$/.test($("#phone").val())){

            $("#phone").closest(".form-group").find(".error").html("手机号格式不正确");
            flag = false;
        }else{
            $("#phone").closest(".form-group").find(".error").html("");
        }

        // 验证码检测
        if($("#code").val() == ""){

            $("#code").closest(".form-group").find(".error").html("验证码不能为空");
            flag = false;
        }else if(!/^\d{4}$/igm.test($("#code").val())){

            $("#code").closest(".form-group").find(".error").html("验证码格式不正确");
            flag = false;
        }else{

            $("#code").closest(".form-group").find(".error").html("");
        }

        // 密码检测
        if($("#password").val() == ""){
            $("#password").closest(".form-group").find(".error").html("密码不能为空");
            flag = false;
        }else{
            $("#password").closest(".form-group").find(".error").html("");
        }

        if($("#repassword").val() == ""){
            $("#repassword").closest(".form-group").find(".error").html("确认密码不能为空");
            flag = false;
        }else{
            $("#repassword").closest(".form-group").find(".error").html("");
        }

        if(flag){

            $(".form-horizontal").submit();
        }
    })
</script>

</body>
</html>